@import '../../../../../../common';

ul {
  list-style: none;

  li.stage {
    width: 10%;
    float: left;
    position: relative;

    .stageItem {
      width: 60%;
      margin-left: auto;
      margin-right: auto;

      ul {
        list-style: none;
        padding: 0px;
        position: relative;

        li {
          margin-bottom: 10px;
          margin-top: 10px;
          padding-top: 5px;
          padding-bottom: 5px;
          position: relative;

          :host-context(.night) & {
            color: $darkTheme_grey_6;

            .success.segment {
              background-color: $darkTheme_night_green;
            }

            .fail.segment {
              background-color: $darkTheme_night_red;
            }

            .inactive.segment {
              background-color: $darkTheme_night_grey;
            }

            .building.segment {
              background-color: $darkTheme_night_blue;
            }
          }

          .success.segment {
            background-color: $cds_color_light_green;
          }

          .fail.segment {
            background-color: $cds_color_light_red;
          }

          .inactive.segment {
            background-color: $cds_color_light_grey;
          }

          .building.segment {
            background-color: $cds_color_light_teal;
          }

          .newspaper .icon {
            float: right;
          }
        }

        li:first-child::before {
          width: 50%;
          left: -50%;
        }

        li:first-child::after {
          width: 50%;
          right: -50%;
        }

        li::before {
          content: '';
          top: -42px;
          border-bottom: 4px solid $cds_color_teal;
          border-left: 4px solid $cds_color_teal;
          position: absolute;
          width: 40px;
          left: -40px;
          height: calc(100% + 14px);
        }

        li::after {
          content: '';
          top: -42px;
          border-bottom: 4px solid $cds_color_teal;
          border-right: 4px solid $cds_color_teal;
          position: absolute;
          width: 40px;
          right: -40px;
          height: calc(100% + 14px);
        }
      }

      .job.ui.segment {
        height: 51px;
        padding: 0;

        .title {
          padding: 5px;
          height: 100%;
          display: flex;
          flex-direction: row;
          align-items: center;

          .ellipsis {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .duration {
          position: absolute;
          right: 4px;
          bottom: -3px;
          color: gray;
          font-size: 0.8rem;
          font-weight: 600;
        }

        .warningPip {
          position: absolute;
          right: 0px;
          top: 2px;
          font-size: 1rem;
        }
      }

      .job.ui.segment {
        border: 2px solid transparent;
      }

      .job.ui.segment.active {
        border: 2px solid $cds_color_teal;
      }
    }
  }

  li.one.stage {
    width: 100%;
  }

  li.two.stage {
    width: 50%;
  }

  li.three.stage {
    width: 33%;
  }

  li.four.stage {
    width: 25%;
  }

  li.five.stage {
    width: 20%
  }

  li.six.stage {
    width: 16%;
  }

  li.seven.stage {
    width: 14%;
  }
}

ul {
  li.stage:first-child {
    .stageItem {
      ul {
        li::before {
          border: 0 none
        }
      }
    }
  }

  li.stage {
    .stageItem {
      ul {
        li:first-child::after {
          border-right: 0 none;
        }

        li:first-child::before {
          border-left: 0 none;
        }
      }
    }
  }

  li.stage:last-child {
    .stageItem {
      ul {
        li::after {
          border: 0 none
        }
      }
    }
  }
}